<template>
  <div class="container">
    <yd-navbar title="基本信息">
      <router-link to slot="left">
        <yd-navbar-back-icon @click.native="$router.back()"></yd-navbar-back-icon>
      </router-link>
      <span slot="right" style="color:#5c5c5c;font-size:14px;" @click="save">保存</span>
    </yd-navbar>
    <div style="padding:.15rem;flex:1;overflow:auto">
      <div class="item">
        <h1 class="label">店铺头像</h1>
        <div class="upload-headimg">
          点击上传
          <img :src="form.avatar" alt id="headImg" />
          <input type="file" class="uploadHeadImg" @change="handleHeadImgChange" />
        </div>
      </div>
      <div class="item">
        <h1 class="label">店铺名称</h1>
        <div>
          <yd-input class="input" :max="20" v-model="form.name" placeholder="请输入店铺名称" />
        </div>
      </div>
      <div class="item">
        <h1 class="label">店铺评分</h1>
        <div>
          <yd-rate size=".3rem" value="2" readonly style="margin:.27rem 0 .15rem .15rem"></yd-rate>
          <p style="color:#757575;padding-left:.15rem">店铺评分不可修改。</p>
        </div>
      </div>
      <div class="item">
        <h1 class="label">地址</h1>
        <div>
          <yd-input class="input" :max="20" v-model="form.address" placeholder="请输入店铺地址" />
        </div>
      </div>

      <div class="item">
        <h1 class="label">主售商品类型</h1>
        <div>
          <select
            style="width:100%;border:none;border-bottom:1px solid #ddd!important;height:1rem;"
            v-model="form.goodsTypes"
          >
            <option value="1">小吃</option>
            <option value="2">海鲜</option>
            <option value="3">炒菜</option>
            <option value="4">海底捞</option>
            <option value="1">海鲜</option>
            <option value="2">小吃</option>
            <option value="3">炒菜</option>
            <option value="4">海底捞</option>
          </select>
        </div>
      </div>
      <div class="item">
        <h1 class="label">营业时间</h1>
        <div class="time-picker">
          <!-- <yd-input class="input" :max="20" v-model="form.time" placeholder="请输入营业时间" /> -->
          <div>
            开始时间：
            <yd-datetime type="time" v-model="form.time.startTime" class="time"></yd-datetime>
          </div>
          <div>
            打烊时间：
            <yd-datetime type="time" v-model="form.time.endTime" class="time"></yd-datetime>
          </div>
        </div>
      </div>
      <div class="item">
        <h1 class="label">公告</h1>
        <div>
          <yd-input class="input" :max="20" v-model="form.notice" placeholder="请输入店铺公告" />
        </div>
      </div>
      <div class="item">
        <h1 class="label">联系方式</h1>
        <div>
          <yd-input type="tel" class="input" :max="11" v-model="form.tel" placeholder="请输入联系方式" />
        </div>
      </div>
      <div class="item">
        <h1 class="label">店铺照片</h1>
        <div class="photos">
          <img
            v-for="(item, index) in imgs"
            :src="item"
            :key="index"
            alt
            @click="()=>delImg(index)"
          />
        </div>
        <div style="margin:.15rem 0">
          <div class="upload-photo">
            点击上传
            <input type="file" v-if="imgs.length < 10" @change="handleImgsChange" />
          </div>
        </div>
        <div style="color:#757575">请上传店铺照片,最多10张。</div>
        <div style="color:#757575">点击已上传图片可删除。</div>
      </div>
      <div class="item">
        <h1 class="label">描述</h1>
        <div>
          <yd-textarea
            v-model="form.desc"
            placeholder="请输入店铺描述,最多100字"
            maxlength="100"
            style="margin-top:.15rem;padding:.15rem;
          border-radius:.15rem"
          ></yd-textarea>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { myShopInfo } from "@/api";
export default {
  name: "shopInfo",
  data() {
    return {
      imgs: [],
      shopInfo: {
        name: "云南过桥米线",
        image: require("../../image/1.jpg")
      },
      form: {
        name: "",
        address: "",
        notice: "",
        desc: "",
        tel: "",
        avatar: "",
        photos: [],
        goodsTypes: "1",
        time: {
          startTime: "",
          endTime: ""
        }
      }
    };
  },
  mounted() {
    this.getShopInfo();
  },
  methods: {
    getShopInfo() {
      myShopInfo({
        userId: 1
      }).then(res => {
        this.shopInfo = res.data;
      });
    },
    delImg(index) {
      this.imgs.splice(index, 1);
    },
    handleHeadImgChange(e) {
      const file = e.target.files[0];
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = e => {
        let base64 = e.currentTarget.result;
        document.getElementById("headImg").src = base64;
        this.form.avatar = base64;
      };
    },
    handleImgsChange(e) {
      const file = e.target.files[0];
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = e => {
        let base64 = e.currentTarget.result;
        this.imgs.push(base64);
      };
    },
    save() {
      const {
        name,
        address,
        desc,
        notice,
        tel,
        avatar,
        photos,
        goodsTypes,
        time: { startTime, endTime }
      } = this.form;
      console.log(this.form);
      const hasError = (() => {
        switch (true) {
          case !avatar:
            return "请上传店铺头像";
          case !name:
            return "请输入店铺名称";
          case !address:
            return "请输入地址";
          case startTime === "00:00" && endTime === "00:00":
            return "请修改营业时间";
          case !tel:
            return "请输入联系方式";
          case !/^1[23456789]\d{9}$/g.test(tel):
            return "联系方式格式不正确";
          case !goodsTypes:
            return "请选择主售商品类型";
          default:
            return false;
        }
      })();
      if (hasError === false) {
        this.$dialog.toast({
          mes: "发送请求提交了",
          type: "success",
          timeout: 800
        });
      } else {
        this.$dialog.toast({
          mes: hasError,
          type: "error",
          timeout: 800
        });
      }
    }
  }
};
</script>
<style scoped lang="less">
.container {
  height: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  background: #f6f6f6;
}
.upload-headimg {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #eaeaea;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 0.2rem;
  position: relative;
  overflow: hidden;

  #headImg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .uploadHeadImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
.label {
  font-size: 0.3rem;
  font-weight: 500;
}

.item {
  margin: 0.15rem 0 0.3rem;
}

.upload-photo {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px dotted #ccc;
  border-radius: 0.15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;

  input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

.time-picker {
  display: flex;
  align-items: center;
  height: 0.7rem;
  margin-top: 0.2rem;

  & > div {
    display: flex;
    width: 50%;
    white-space: nowrap;
    align-items: center;
  }

  .time {
    font-size: 0.4rem;
  }
}

.photos {
  display: flex;
  flex-wrap: wrap;

  img {
    width: 32%;
    max-height: 2rem;
    margin: 0.65%;
  }
}

/deep/.input {
  border-bottom: 1px solid #ddd;
  height: 0.8rem;
  margin: 0.1rem 0;
  padding: 0 0.15rem;

  input {
    color: #333;
    letter-spacing: 0.5px;
  }
}
.avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.05rem solid #fff;
  margin-right: 0.3rem;
}

.userInfo {
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 0.34rem;
}

.line {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 0.2rem 0;
}

.box {
  background-color: #eee;
  border-radius: 0.05rem;
  padding: 0.5rem;
}
</style>
